<template>
  <view class="feedback-reply-container">
    <view class="header">
      <text class="title">反馈回复</text>
      <text class="subtitle">查看您的反馈处理进度和回复</text>
    </view>

    <view class="add-feedback-section">
      <button class="add-feedback-btn" @click="goToAddFeedback">
        <text class="add-icon">+</text>
        <text class="add-text">添加反馈</text>
      </button>
    </view>

    <view v-if="feedbackList.length === 0" class="empty-state">
      <text class="empty-text">暂无反馈记录</text>
      <text class="empty-subtext">您提交的反馈将在这里显示</text>
    </view>

    <view v-else class="feedback-list">
      <view 
        v-for="feedback in feedbackList" 
        :key="feedback.id"
        class="feedback-item"
        @click="viewFeedbackDetail(feedback)"
      >
        <view class="feedback-header">
          <view class="feedback-type">
            <text class="type-tag" :class="getTypeClass(feedback.feedbackType)">
              {{ getTypeLabel(feedback.feedbackType) }}
            </text>
            <text class="status-tag" :class="getStatusClass(feedback.status)">
              {{ getStatusLabel(feedback.status) }}
            </text>
          </view>
          <text class="feedback-time">{{ formatRelativeTime(feedback.createTime) }}</text>
        </view>

        <view class="feedback-content">
          <text class="content-text">{{ feedback.content }}</text>
        </view>

        <view v-if="feedback.reply" class="reply-section">
          <view class="reply-header">
            <text class="reply-label">官方回复</text>
            <text class="reply-time">{{ formatRelativeTime(feedback.updateTime) }}</text>
          </view>
          <text class="reply-content">{{ feedback.reply }}</text>
        </view>

        <view class="feedback-footer">
          <text class="contact-info" v-if="feedback.contact">
            联系方式: {{ feedback.contact }}
          </text>
        </view>
      </view>
    </view>

    <Loading :show="isLoading" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getFeedbackList } from '@/api/user';
import { formatRelativeTime } from '@/utils/format';
import Loading from '@/components/Loading.vue';

const feedbackList = ref<any[]>([]);
const isLoading = ref(false);

// 获取反馈类型标签
const getTypeLabel = (type: number) => {
  const typeMap: { [key: number]: string } = {
    1: '功能建议',
    2: '问题投诉',
    3: '其他'
  };
  return typeMap[type] || '其他';
};

// 获取反馈类型样式类
const getTypeClass = (type: number) => {
  const classMap: { [key: number]: string } = {
    1: 'type-suggestion',
    2: 'type-complaint',
    3: 'type-other'
  };
  return classMap[type] || 'type-other';
};

// 获取状态标签
const getStatusLabel = (status: number) => {
  const statusMap: { [key: number]: string } = {
    0: '待处理',
    1: '处理中',
    2: '已处理'
  };
  return statusMap[status] || '待处理';
};

// 获取状态样式类
const getStatusClass = (status: number) => {
  const classMap: { [key: number]: string } = {
    0: 'status-pending',
    1: 'status-processing',
    2: 'status-completed'
  };
  return classMap[status] || 'status-pending';
};

// 查看反馈详情
const viewFeedbackDetail = (feedback: any) => {
  uni.navigateTo({
    url: `/pages/settings/feedbackDetail?id=${feedback.id}`
  });
};

// 跳转到添加反馈页面
const goToAddFeedback = () => {
  uni.navigateTo({
    url: '/pages/settings/feedback'
  });
};

// 获取反馈列表
const loadFeedbackList = async () => {
  try {
    isLoading.value = true;
    
    // 获取用户信息
    const userInfo = uni.getStorageSync('userInfo');
    if (!userInfo || !userInfo.id) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      return;
    }

    const response = await getFeedbackList({
      userId: userInfo.id,
      pageNum: 1,
      pageSize: 50
    });
    console.log(response)
    if (response.code === 200) {
      feedbackList.value = response.rows || [];
    } else {
      uni.showToast({
        title: response.msg || '获取反馈列表失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取反馈列表失败:', error);
    uni.showToast({
      title: '获取反馈列表失败',
      icon: 'none'
    });
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  loadFeedbackList();
});
</script>

<style>
.feedback-reply-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.header {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.add-feedback-section {
  margin-bottom: 20rpx;
}

.add-feedback-btn {
  width: 100%;
  height: 88rpx;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 32rpx;
  border: none;
}

.add-icon {
  font-size: 36rpx;
  font-weight: bold;
}

.add-text {
  font-size: 32rpx;
}

.empty-state {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 100rpx 30rpx;
  text-align: center;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
  display: block;
  margin-bottom: 20rpx;
}

.empty-subtext {
  font-size: 28rpx;
  color: #ccc;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feedback-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.feedback-type {
  display: flex;
  gap: 20rpx;
}

.type-tag {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #ffffff;
}

.type-suggestion {
  background-color: #52c41a;
}

.type-complaint {
  background-color: #ff4d4f;
}

.type-other {
  background-color: #1890ff;
}

.status-tag {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #ffffff;
}

.status-pending {
  background-color: #faad14;
}

.status-processing {
  background-color: #1890ff;
}

.status-completed {
  background-color: #52c41a;
}

.feedback-time {
  font-size: 24rpx;
  color: #999;
}

.feedback-content {
  margin-bottom: 20rpx;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.reply-section {
  background-color: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-left: 4rpx solid #1890ff;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.reply-label {
  font-size: 26rpx;
  color: #1890ff;
  font-weight: bold;
}

.reply-time {
  font-size: 24rpx;
  color: #999;
}

.reply-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.feedback-footer {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.contact-info {
  font-size: 24rpx;
  color: #999;
}
</style> 